<template>
  <div>
    <p>注：有 <span>*</span> 表示有课程</p>
    <!-- style="width: 800px; height: 200px; overflow: scroll" -->
    <table
      border="0"
      width="100%"
      align="center"
      cellpadding="10"
      cellspacing="0"
    >
      <!-- 标题-->

      <caption>
        <h2>{{ title }}</h2>
      </caption>

      <!-- 表头-->
      <tr v-for="(item, index) in statistical" :key="index">
        <td v-for="(item1, index1) in item" :key="index1">
          {{ findItem1(item1) }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { getTrainmatrix } from "@/api/trainAdmin/trainMatrix";
export default {
  data() {
    return {
      statistical: [],
      title: "",
    };
  },
  created() {
    this.getTrain();
  },
  methods: {
    getTrain() {
      getTrainmatrix().then((response) => {
        console.log("response---", response);
        this.statistical = response.result.trainMatrix;
        this.title = response.result.title;
      });
    },
    findItem1(val) {
      if (val === 0) return "";
      else if (val === 1) return "*";
      else return val;
    },
  },
};
</script>
<style scoped>
p {
  font-size: 0.4vh;
  color: darkgray;
}
span {
  color: red;
}
tr:nth-of-type(n + 2) td:nth-of-type(n + 2) {
  color: red;
  font-size: 3vh;
}
caption {
  margin-bottom: 2vh;
}
h2 {
  font-size: 3vh;
}
table {
  border: 1px solid #dcdfe6;
  margin-top: 10px;
}
caption {
  text-align: center;
  height: 40px;
  line-height: 40px;
  /* border: 1px solid #dcdfe6; */
}
tr {
  text-align: center;
  height: 40px;
}
th,
td {
  border: 1px solid #dcdfe6;
}
</style>